<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>2222222222222</title>
	</head>
	<body>
		<style type="text/css">
        *{padding: 0px; margin: 0px;border:0px;}   		
        ul, ol { list-style: none; }    		
        /*.tm-footer{background: rgb(236, 144, 19);}*/
    	.mainbox{width: 100%;margin: 0 auto;background: #fff;margin-top: -12px;padding-bottom: 20px;}    		
        .mainbox .chose{margin: 12px auto;width: 1200px;padding-top: 20px;}    		
        .mainbox .chose .box{width: 100%;display: flex;align-items: center;margin-bottom: 15px;}    		
        .mainbox .chose .box span{width: 10%;color: #676767;font-size: 16px;}    		
        .mainbox .chose .box ul{display: flex;flex-wrap: wrap;width: 90%;margin: 0;}    		
        .mainbox .chose .box ul li{color: #161616;font-size: 14px;cursor: pointer;border: 1px solid #afafaf;padding: 7px 14px;border: 1px solid #afafaf;border-right: none;}    		
        .mainbox .chose .box ul li:nth-of-type(1){margin-right: 10px;border-radius: 4px;border-right: 1px solid #afafaf;}    		
        .mainbox .chose .box ul li:nth-of-type(2){border-radius: 4px 0 0 4px;}    		
        .mainbox .chose .box ul li:nth-last-of-type(1){border-radius: 0 4px 4px 0;border-right: 1px solid #afafaf;}    		
        .mainbox .chose .box ul li:hover{background: #e0f7ed;}    		    		
        .mainbox .chose .box ul li.act{color: #11a560;border-color: #11a560;border-right: none;background-color: #e0f7ed;font-weight: 700;}    		
        .mainbox .chose .box ul li:nth-of-type(1).act{border-right: 1px solid #11a560;}    		
        .mainbox .chose .box ul li:nth-last-of-type(1).act{border-right: 1px solid #11a560;}    		
        .mainbox .chose .box ul li.act2{border-left: 1px solid #11a560;}    		
        .mainbox .chose .box ul li:nth-of-type(2).act2{border-left: 1px solid #afafaf;}    		    		
        .mainbox .chose .box .fanwei{display: flex;height: 100%;width: 21%;line-height: 36px;font-size: 22px;}    		
        .mainbox .chose .box .fanwei div{display: flex;width: 50%;}    		
        .mainbox .chose .box .fanwei input{font-size: 14px;width: 90%;height: 36px;line-height: 36px;border-radius: 4px 0 0 4px;border: 1px solid #afafaf;color: #161616;padding: 0 12px;outline: none;transition: border .2s ease-in;}
    	.mainbox .chose .box .fanwei span{width: 34%;text-align: center;border: 1px solid #afafaf;background: #f0f0f0;font-size: 14px;color: #161616;    border-left: none;border-radius: 0 4px 4px 0;line-height: 34px;}    
        .mainbox .chose .box .ul2{width: 44%;}    		
        .mainbox .chose .box .fanwei .left{display: flex;justify-content: flex-end;margin-right: 5px;}    		
        .mainbox .chose .box .fanwei .rig{display: flex;justify-content: flex-start;margin-left: 5px;}    		    		
        .mainbox .chose .box .time{width: 25%;display: flex;line-height: 36px;font-size: 16px;justify-content: flex-end;}    		
        .mainbox .chose .box .time div{width: 41%;border-radius: 4px;border: 1px solid #afafaf;display: flex;justify-content: flex-end;align-items: center;}    		
        .mainbox .chose .box .time .left{margin-right: 5px;}    		
        .mainbox .chose .box .time .rig{margin-left: 5px;}    		
        .mainbox .chose .box .time input{font-size: 14px;width: 90%;height: 36px;line-height: 36px;margin-bottom: 0;color: #161616;border: none; padding: 0 10px;outline: none;transition: border .2s ease-in;}    		
        .mainbox .chose .box .time .fa {width: 30px;padding-left: 10px;}    		
        .mainbox .chose .box .time .fa-calendar:before {font-size: 17px;}	    		
        .mainbox .chose .box .buttons{width: 43%;display: flex;align-content: center;}
        .mainbox .chose .box .buttons button{background: transparent;background-color: #11a560;font-weight: 600;border-radius: 10px;width: 6rem;height: 36px;line-height: 36px;padding: 0;margin: 0; font-size: 16px;margin-left: 50px; }        
        .mainbox .table{margin: 12px auto;width: 1200px;padding-top: 20px;}    		
        .mainbox .table table{width: 100%;border: none;border-top: 1px solid #e5e5e5;}    		
        .mainbox .table table tr{border-bottom: 1px solid #e5e5e5;}    		
        .mainbox .table table th{text-align: center;font-size: 15px;font-weight: 700;border-bottom: 1px solid #e5e5e5;padding: 28px 0;}    		
        .mainbox .table table td{text-align: center;border-bottom: 1px solid #e5e5e5;padding: 28px 0;}    		    		
        .mainbox .table .jiedan{display: block;margin: 0 auto;border-radius: 5px;width: 76px;height: 28px;line-height: 28px;border: 1px solid #11a560!important;background-color: #11a560!important;color: #fff!important;font-size: 16px;font-weight: 600;}    		
        .mainbox .table td.cdr{width: 23%;text-align: left;padding: 0 2%;line-height: 24px;}    		
        .mainbox .table td.cdr .type{padding: 0;width: 24px;text-align: center;height: 24px;line-height: 24px;font-size: 14px;font-weight: 700;border-radius: 12px;cursor: default;display: inline-block;}    		
   		    		
        .mainbox .table td.cdr .num{float: right; display: inline-block;margin-left: 8px;background-color: #ffe9cc;color: #ff9800;height: 24px;line-height: 24px;font-size: 14px;font-weight: 700;text-align: left;border-radius: 12px;padding: 0 8px;}    		
        .mainbox .table td.cdr .cdr1{width: 100%;display: flex;align-items: center;flex-wrap: wrap;}    		
        .mainbox .table td.cdr p{width: 100%;float: left;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;margin-bottom: 0;    color: #222;font-size: 0.875rem;}    		    		.mainbox .table td.mf{position: relative;}    		
        .mainbox .table td.mf img {display: block; position: absolute;top: 0;left: 0;width: 40%;}    		
        .mainbox .table td img{display: none;}    		
        .mainbox .table td.red{color: #e5342b;}    		    		
        .mainbox .table td.bao{position: relative;}    		
        .mainbox .table td.bao img{display: block; position: absolute;top: 27.1px;left: 24px;width: 18%;}
        .tm-footer{
            background:#f7f7f7;
        }
        .tm-footer, .tm-footer a{
            color: #000 !important;
        }   
        .tm-footer h3 {
            color: #000;
            font-weight: 500;
        } 	
        
    </style>        	
    <div class="mainbox">    		
        <div class="chose">    			
            <div class="box">    				
                <span>多选多选</span>    				
                <ul class="ul1" id="leixin">
    				<li class="act">全部</li>    					
                    <li>多选</li>    					
                    <li>多选</li>    					
                    <li>多选</li>    					
                    <li>多选多选</li>
    			</ul>    			
            </div>    			
            <div class="box">    				
                <span>单选</span>    				
                <ul class="ul" id="status">    					
                    <li class="act">全部</li>    					
                    <li>单选</li>    					
                    <li>单选</li>  				
                </ul>    			
            </div>    			
            
            <div class="box">
                <span>其他条件</span>

                <div class="fanwei">                        
                    <div class="left">                          
                        <input type="" name="minmoney" id="minmoney" placeholder="最小金额"/>                          
                        <span>万</span>                      
                    </div>                      -                       
                    <div class="rig">                           
                        <input type="" name="maxmoney" id="maxmoney" placeholder="最大金额"/>                          
                        <span>万</span>                      
                    </div>                  
                </div>

                <div class="time">                      
                    <div class="left">                          
                        <i class="fa fa-calendar"></i>                          
                        <input type="text"  value="" id="demo-1" placeholder="开始日期">                        
                    </div>                      至                       
                    <div class="rig">                           
                        <i class="fa fa-calendar"></i>                          
                        <input type="text"  value="" id="demo-2" placeholder="结束日期">                        
                    </div>                  
                </div>

                <div class="buttons">
                    <button id="submit">查询</button>
                </div>
            </div>   		
        </div>    		
        <div class="table">    			
            <table border="0" cellspacing="0" id="test">					
                <tr>					  
                <th>时间</th>					  
                    <th>人员</th>					  
                    <th>金额 (万元)</th>					  
                    <th>到期日</th>					  
                    <th>扣息(元)</th>					  
                    <th>年利率</th>					  
                    <th>情况</th>					  
                    <th>操作</th>					
                </tr>          
                        <tr>                      
                            <td class="mf">                     
                                00000                  
                            </td>                     
                            <td>11111</td>                      
                            <td>22222</td>                     
                            <td>33333</td>                   
                            <td>44444</td>
                            <td>55555</td>
                            <td class="red">555555</td>                     
                            <td><a href="#" class="jiedan">确认</a></td>                    
                        </tr>
            </table>    		
        </div>    	
        
    </div>				
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>		
    <link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">		
    <link href="css/foundation.min.css" rel="stylesheet" type="text/css">		
    <link href="css/foundation-datepicker.css" rel="stylesheet" type="text/css">		
    <script src="js/foundation-datepicker.min.js"></script>		
    <script src="js/locales/foundation-datepicker.zh-CN.js"></script>			    	
    <script type="text/javascript">
    		$(function(){							
                $(".ul1 li").click(function() {						
                    if($(this).hasClass("act")){						
                        $(this).removeClass('act'); 						
                        $(this).siblings('li').next('li').removeClass('act2');					
                    }else{						
                        if($(".ul1 li:first").hasClass("act")){							
                            $(".ul1 li:first").removeClass('act');							
                            $(".ul1 li:first").next('li').removeClass('act2');						
                        }						
                        $(this).addClass('act');						
                        $(this).next('li').addClass('act2');					
                    }	          
                 });	           	            
                $(".ul1 li:first").click(function() {					
                    if($(this).hasClass("act")){						
                        $(this).siblings('li').removeClass('act');						
                        $(this).siblings('li').next('li').removeClass('act2');					
                    }else{						
                        $(this).siblings('li').removeClass('act');						
                        $(this).siblings('li').next('li').removeClass('act2');						
                        $(this).addClass('act');						
                        $(this).next('li').addClass('act2');       					
                    } 				
                });								    
                $(".ul li").click(function() {			        
                    $(this).siblings('li').removeClass('act');  					
                    $(this).siblings('li').next('li').removeClass('act2');					
                    $(this).addClass('act');			        
                    $(this).next('li').addClass('act2');           			    
                });
                
            }); 									
            $('#demo-1').fdatepicker({				
                format: 'yyyy-mm-dd',			
            });			
            $('#demo-2').fdatepicker({				
                format: 'yyyy-mm-dd',			
            });
            		
    	</script> 
	</body>
</html>
